<template>
	<view class="search-blog-container">
		<view class="search-bar-box">
			<my-search 
			:isShowInput="true" 
			:placeholderText="defaultText"
			v-model="searchVal"
			:config="{
				backgroundColor:'#f1f0f3'				
				}"
			@search="onSearchConfirm"
			@focus="onSearchFocus"
			@blur="onSearchBlur"
			@clear="onSearchClear"
			@input="onSearchInput"
			@cancel="onSearchCancel"
			></my-search>
		</view>
		<!-- 搜索列表 -->
		<view class="search-hot-list-box card" v-if="showType === HOT_LIST">
			<search-hot-list @onSearch="onSearchConfirm"></search-hot-list>
		</view>
		<!-- 搜索历史 -->
		<view class="search-history-box" v-else-if="showType===SEARCH_HISTORY">
			<search-history  @onSearch="onSearchConfirm"></search-history>
		</view>
		<!-- 搜索结果 -->
		<view class="search-result-list-box" v-else>
			<search-result-list ref="mescrollItem" :queryStr="searchVal"></search-result-list>
		</view>
	</view>
</template>

<script>
	import MescrollCompMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js'
	import {mapMutations} from 'vuex'
	import{getDefaultText} from 'api/search'	
	//搜索列表
	const HOT_LIST ="0"
	//搜索历史
	const SEARCH_HISTORY ="1"
	//搜索结果
	const SEARCH_RESULT ="2"
	export default {
		components:{},
		mixins:[MescrollCompMixin],
		data() {
			return {
				HOT_LIST,
				SEARCH_HISTORY,
				SEARCH_RESULT,
				showType:HOT_LIST,
				//输入框中的内容
				searchVal:'',
				//输入框中的placeholder
				defaultText:'请输入'
			};
		},
		created() {
			this.loadDefaultText()
		},
		methods:{
			...mapMutations('search',['addSearchData']),
			//获取推荐搜索文本
			async loadDefaultText(){
				const{data:res} = await getDefaultText()
				this.defaultText =res.defaultText
			},
			//获取的内容
			onSearchConfirm(val){	
				//value不存在使用推荐的内容
				this.searchVal = val? val : this.defaultText
				//保存搜索历史数据
				this.addSearchData(this.searchVal)
				//当用户输入时，如果包含内容
				if(this.searchVal){
					this.showType =SEARCH_RESULT
				}
			},
			onSearchFocus(val){
				this.showType =SEARCH_HISTORY
			},
			onSearchBlur(val){
			},
			onSearchClear(val){
				this.showType =SEARCH_HISTORY
			},
			onSearchInput(val){
			},
			onSearchCancel(val){
				this.showType =HOT_LIST
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-blog-container {
	  .search-bar-box {
	    background-color: $uni-bg-color;
	    padding: $uni-spacing-row-sm;
	    position: sticky;
	    top: 0px;
	    z-index: 9;
	  }
	}

</style>
